<template>
  <div class="contain">
    <img src="@/assets/images/xiankuang.png" class="bgcClass" />
    <TopPart />
    <div class="boxClass">
      <div>
        <div>
          <div class="imgClass">
            <img src="@/assets/images/pdyj.svg" />
          </div>
          <div class="firstClass">{{ theFirst }}</div>
          <div class="finClass">视力测试完成</div>
        </div>
        <div
          class="btnClass"
          style="outline: none"
          @keydown="handleKeyDown"
          tabindex="0"
        >
          <div @click="choose()">确定</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import TopPart from "@/components/TopPart";
import { mapGetters } from "vuex";
import { debounce } from "ant-design-vue/lib/vc-table/src/utils";
import screenfull from "screenfull";
export default {
  components: {
    TopPart,
  },
  data() {
    return {
      timer: null, //定时器
      theFirst: "",
      synth: "",
      msg: "",
      nowIndex: Number(sessionStorage.getItem("currentIndex")),
      nowEye: sessionStorage.getItem("nowEye"),
    };
  },
  computed: {
    ...mapGetters({
      testingData: "getTestingData",
      childList: "getChildList",
    }),
  },
  created() {},
  mounted() {
    if (this.childList[this.nowIndex]) {
      this.theFirst = this.childList[this.nowIndex].nickName;
    }
    console.log(this.$el.getElementsByClassName("btnClass")[0], 99);
    this.$el.getElementsByClassName("btnClass")[0].focus();

    this.timer = setInterval(() => {
      this.$el.getElementsByClassName("btnClass")[0].focus(); //获取焦点，不然遥控器容易失去控制
    }, 1000);

    document.addEventListener("keydown", this.preventKeyScroll);

    if ("speechSynthesis" in window) {
      this.synth = window.speechSynthesis; // 启用文本
      this.msg = new SpeechSynthesisUtterance();

      setTimeout(() => {
        let nowStudentData = this.childList[this.nowIndex];
        let nextIndex = this.nowIndex + 1;
        console.log(nextIndex, "nextIndex");
        if (nextIndex == this.childList.length) {
          this.handleSpeak(nowStudentData.nickName + "同学已测试完毕");
        } else {
          let nextStudentData = this.childList[nextIndex];
          console.log(nextStudentData, "nextStudentData");
          this.handleSpeak(
            nowStudentData.nickName +
              "同学已测试完毕,请" +
              nextStudentData.nickName +
              "同学做好准备"
          );
        }
      }, 200);
    } else {
      console.log("Web Speech API is not supported.");
    }
  },
  destroyed() {
    clearInterval(this.timer);
  },
  methods: {
    preventKeyScroll(event) {
      // 检查按下的键是否是方向键
      if (["ArrowLeft", "ArrowRight"].includes(event.key)) {
        event.preventDefault();
      }
    }, //防止屏幕移动
    choose() {
      let _this = this;
      let dataList = this.childList.filter(
        (i) => i.currentStatus == 3 || i.currentStatus == 2
      );
      console.log(this.childList, "childList");
      console.log(dataList, "dataList");
      if (
        dataList.length == 0
      ) {
        this.$confirm({
          title: "提示",
          content: "所有学生已检测完毕",
          okText: "确认",
          cancelText: "取消",
          onOk: () => {
            if (screenfull.isEnabled) {
              screenfull.toggle(); //全屏/退出全屏切换
            }
            _this.$router.push({
              path: "/Login",
            });
            _this.$store.commit("setIsShow", false);
          },
          onCancel: () => {
            if (screenfull.isEnabled) {
              screenfull.toggle(); //全屏/退出全屏切换
            }
            _this.$router.push({
              path: "/Login",
            });
            _this.$store.commit("setIsShow", false);
          },
        });
      } else {
        const nowIndex1 = _this.nowIndex + 1;
        sessionStorage.setItem("currentIndex", nowIndex1);
        _this.childList[_this.nowIndex].currentStatus = 5;
        if (_this.childList[nowIndex1]) {
          _this.childList[nowIndex1].currentStatus = 1;
        }
        if (_this.childList[nowIndex1 + 1]) {
          _this.childList[nowIndex1 + 1].currentStatus = 2;
        }
        _this.nextEyeTest();
      }
    },
    nextEyeTest() {
      /* sessionStorage.setItem("nowEye", "left"); */
      this.closeSpeak();
      this.$router.push({
        path: "/ChooseEye",
      });
    }, // 前往下一个眼睛测试
    handleSpeak(text) {
      this.msg.text = text; // 内容
      this.msg.lang = "zh-CN"; // 使用的语言:中文
      this.msg.volume = 1; // 声音音量：1
      this.msg.rate = 0.8; // 语速：1
      this.msg.pitch = 1; // 音高：1
      console.log(this.synth, "this.synththis.synththis.synth");
      this.synth.speak(this.msg); // 播放
      console.log(123);
    },
    closeSpeak() {
      console.log(this.synth, "444synth");
      this.synth.cancel(); // 取消该次语音播放
    },
    goPage() {
      if (this.type == 1) {
        this.testingData.rightEye = null;
        this.$store.commit("setTestingData", this.testingData);
      } else {
        this.testingData.leftEye = null;
        this.$store.commit("setTestingData", this.testingData);
      }
      this.$router.push("/VisionTest");
    },

    // 按下按键
    handleKeyDown: debounce(function (event) {
      console.log("event", event);
      switch (event.key) {
        case "Enter":
          // 确定
          this.choose();
          break;
        default:
          break;
      }
    }, 350),
  },
};
</script>

<style lang="less" scoped>
.contain {
  padding: 1% 2%;
  height: 100%; /* 至少为视口高度 */
  display: flex;
  flex-direction: column;
  .bgcClass {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 99;
  }
  .boxClass {
    flex: 1;
    background-color: #fff;
    border-radius: 0.06rem;
    padding: 0.15rem 0 0.34rem;
    font-size: 0.2rem;
    color: #2070cf;
    font-weight: bold;
    position: relative;
    .firstClass {
      margin: 0.1rem 0 0.1rem;
      font-size: 0.22rem;
    }
    .finClass {
      margin: 0.1rem 0;
    }
    & > div:first-child {
      width: 100%;
      height: 100%;
      margin: 0 auto;
      text-align: center;
    }
    .imgClass {
      img {
        height: 1.1rem;
        width: 1.1rem;
        margin-top: 0.2rem;
        margin-bottom: 0.05rem;
      }
      color: #fc427b;
    }
    .imgsClass {
      text-align: center;
      position: absolute;
      bottom: 0.1rem;
      left: 0;
      right: 0;
      margin: 0 auto;
      img {
        width: 1.4rem;
        height: 1.4rem;
      }
    }
  }
  .btnClass {
    width: 60%;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    margin-top: 0.1rem;
    z-index: 9999;
    & > div {
      cursor: pointer;
      width: 100%;
      height: 0.38rem;
      line-height: 0.38rem;
      font-size: 0.15rem;
      border: 2px solid #3e90fb;
      border-radius: 0.5rem;
      margin-top: 0.2rem;
    }
  }
}
</style>